<template>
    <header>
        <div class="search-return" @click="goBack">
            <i><van-icon name="arrow-left" /></i>
        </div>
        <div class="search-main">
            <i class='iconfont icon-fangdajing'></i>
            <form action="" onsubmit="return false" @keyup.enter="goSearchList">
            <input type="search" placeholder="随便搜搜..." v-model="searchVal">
            </form>
        </div>
        <div class="search-btn" @click="goSearchList">搜索</div>
    </header>
</template>
<script>
import Vue from 'vue';
import { Icon } from 'vant';

Vue.use(Icon);
export default {
    data(){
        return{
            searchVal:this.$route.query.key || '',
            searchArr:[]
        }

    },
 created(){


 },
   methods:{
       goBack(){
           this.$router.back()
       },
       goSearchList(){
           //如果搜索的关键字为空白，那就直接返回
           if(!this.searchVal) return;
           //判断之前有没有搜索的本地存储
           if(!localStorage.getItem('searchList')){
               //没有
               localStorage.setItem('searchList','[]');

           }else{
               //有
               this.searchArr=JSON.parse(localStorage.getItem('searchList'));
           }
           //增加数据
           this.searchArr.unshift(this.searchVal);
           //ES6去重
           let newArr=new Set(this.searchArr);
           

           //给本地存储赋值
           localStorage.setItem('searchList',JSON.stringify(Array.from(newArr)));
           //路径如果没有变化，不跳转页面
           if(this.searchVal === this.$route.query.key)return;
               
           //跳转页面
           this.$router.push({
               name:'list',
               query:{
                   key:this.searchVal
               }
           })
       }
   } 
}
</script>
<style scoped>
header{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 44px;
background-color: rgba(053,103,083) ;
color: rgb(197, 176, 146);

}
.search-return,.search-btn{
    padding: 0 10px;
}
.search-main{
    display: flex;
    align-items: center;
    width: 270px;
    height: 30px;
    border-radius: 12px;
background-color:#fff ;
}
.search-main i{
    padding:0 6px;
    font-size:20px ;
}
.search-main form{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.search-main input{
    width: 100%;
    color: black;
}
.search-btn{
    font-size: 15px;
}
.search-return i {
font-size: 30px;
}
</style>